<template>
  <div>
    <el-form-item
      :label="parentNoTitle"
      label-width="150px"
      class="normal-type"
    >
      <div slot="label">
        {{ parentNoTitle }}<span style="color:#ff0000">*</span>
      </div>
      <div>{{changeOrderName}}
          <el-button  @click="cleanData">请选择</el-button>
          <el-dialog :visible.sync="dialogVisible" width="50%" :append-to-body="true"  :before-close="handleClose">
            <template>
              <div>客户预报信息</div>
<!--              :indeterminate="isOrderLockedIndeterminate"-->
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="checkedOrderLocked" >
<!--                @change="handleCheckedOrderLockedChange"-->
                <el-checkbox v-for="(item, value)  in orderLocked" :label="value" :key="value">{{item}}</el-checkbox>
              </el-checkbox-group>
              <br><br/>
              <div>发件人信息</div>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="checkedShipperPersonName" @change="handleCheckedShipperChange">
                <el-checkbox v-for="(item, value) in shipperPersonName" :label="value" :key="value">{{item}}</el-checkbox>
              </el-checkbox-group>
              <br><br/>
              <div>进口商信息</div>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="checkedImporterCompanyName" @change="handleCheckedImporterCompanyChange">
                <el-checkbox v-for="(item, value) in importerCompanyName" :label="value" :key="value">{{item}}</el-checkbox>
              </el-checkbox-group>
            </template>
               <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveData">保存</el-button>
      </span>
          </el-dialog>
      </div>
    </el-form-item>
  </div>
</template>

<script>
  import {m, notify} from "@/store/yg/common/local";
  import {ajax} from "@/store/yg/common/utils";
  import axios from "axios";
  import * as constant from "@/store/yg/common/constant";

  export default {
    data() {
      return {
        checkOrderLockedAll: false,
        checkShipperAll:false,
        checkImporterCompanyAll:false,
        parentNoTitle: "改单字段",
        changeOrderName: "",
        row: {},
        //客户预报信息
        checkedOrderLocked:[],
        //客户预报信息原始数据
        orderLocked:[],
        //发件人信息
        checkedShipperPersonName:[],
        //发件人信息原始数据
        shipperPersonName:[],
        //进口商信息
        checkedImporterCompanyName:[],
        //进口商信息原始数据
        importerCompanyName:[],
        changeOrderField:[],
        isOrderLockedIndeterminate: true,
        isShipperIndeterminate:true,
        isImporterCompanyIndeterminate:true,
        dialogVisible: false,
        map:'',
      };
    },

    mounted() {
      this.initRawData();
    },
    methods: {

      cleanData(){
        this.dialogVisible=true;
        this.changeOrderName="";
      },

      initRawData(){
        let id=this.$store.state.edit.id;
        this.orderLocked=  this.$store.state.edit.entry.sources["changeOrderLockedSource"];
        this.shipperPersonName=this.$store.state.edit.entry.sources["changeShipperPersonSource"];
        this.importerCompanyName=this.$store.state.edit.entry.sources["changeImporterCompanySource"];
        if (id!=null&&id!=""){
          this.checkedImporterCompanyName=this.$store.state.edit.row.changeOrderField["importerCompanyName"];
          this.checkedShipperPersonName=this.$store.state.edit.row.changeOrderField["shipperPersonName"];
          this.checkedOrderLocked=this.$store.state.edit.row.changeOrderField["orderLocked"];
          if (this.checkedOrderLocked.length > 0) {
            this.changeOrderName = "客户预报信息:";
            for (const item in this.checkedOrderLocked) {
              this.changeOrderName += this.orderLocked[this.checkedOrderLocked[item]] + ",";
            }
          }
          if (this.checkedShipperPersonName.length > 0) {
            this.changeOrderName += "发件人信息:";
            for (const item in this.checkedShipperPersonName) {
              this.changeOrderName += this.shipperPersonName[this.checkedShipperPersonName[item]] + ",";
            }
          }
          if (this.checkedImporterCompanyName.length > 0) {
            this.changeOrderName += "进口商信息:";
            for (const item in this.checkedImporterCompanyName) {
              this.changeOrderName += this.importerCompanyName[this.checkedImporterCompanyName[item]] + ",";
            }
          }
          console.log(this.changeOrderName);
          //取字符的前20位
          if (this.changeOrderName.length>20){
            this.changeOrderName=this.changeOrderName.substring(0, 19)+"......";
          }
        }
      },
      handleCheckOrderLockedAllChange(val) {
        this.checkedOrderLocked = val ? this.orderLocked : [];
        this.isOrderLockedIndeterminate = false;
      },
      handleCheckShipperAllChange(val){
        this.checkedShipperPersonName = val ? this.shipperPersonName : [];
        this.isShipperIndeterminate = false;
      },
      handleCheckImporterCompanyAllChange(val){
        this.checkedImporterCompanyName = val ? this.importerCompanyName : [];
        this.isImporterCompanyIndeterminate = false;
      },
      handleCheckedOrderLockedChange(value) {
        let checkedCount = value.length;
        this.checkOrderLockedAll = checkedCount === this.orderLocked.length;
        this.isOrderLockedIndeterminate = checkedCount > 0 && checkedCount < this.orderLocked.length;
      },
      handleCheckedShipperChange(value){
        let checkedCount = value.length;
        this.checkShipperAll = checkedCount === this.shipperPersonName.length;
        this.isShipperIndeterminate = checkedCount > 0 && checkedCount < this.shipperPersonName.length;
      },
      handleCheckedImporterCompanyChange(value){
        let checkedCount = value.length;
        this.checkImporterCompanyAll = checkedCount === this.importerCompanyName.length;
        this.isImporterCompanyIndeterminate = checkedCount > 0 && checkedCount < this.importerCompanyName.length;
      },
      saveData: function () {
        //保存数据
        console.log("已选择的", this.checkedOrderLocked)
        //显示前20个字符
        if (this.checkedOrderLocked.length > 0) {
          this.changeOrderName = "客户预报信息:";
          for (const item in this.checkedOrderLocked) {
            this.changeOrderName += this.orderLocked[this.checkedOrderLocked[item]] + ",";
          }
        }
        if (this.checkedShipperPersonName.length > 0) {
          this.changeOrderName += "发件人信息:";
          for (const item in this.checkedShipperPersonName) {
            this.changeOrderName += this.shipperPersonName[this.checkedShipperPersonName[item]] + ",";
          }
        }
        if (this.checkedImporterCompanyName.length > 0) {
          this.changeOrderName += "进口商信息:";
          for (const item in this.checkedImporterCompanyName) {
            this.changeOrderName += this.importerCompanyName[this.checkedImporterCompanyName[item]] + ",";
          }
        }
        console.log(this.changeOrderName);
        //取字符的前20位
        if (this.changeOrderName.length>20){
          this.changeOrderName=this.changeOrderName.substring(0, 19)+"......";
        }
        //赋值给后台字段
        let  map=new Map([["orderLocked",this.checkedOrderLocked],["shipperPersonName",this.checkedShipperPersonName],
          ["importerCompanyName",this.checkedImporterCompanyName]]);
        this.$store.state.edit.row["changeOrderField"]= Object.fromEntries(map.entries());
        this.dialogVisible = false;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});

      },
    }
  };
</script>

<style>
  .mail {
    text-align: left;
  }

  .normal-type .el-form-item__content {
    padding: 0 5px 0 15px;
  }
</style>
